<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne"  name="sex" value="男"/>男
        <input type="radio" id="sexTwo" checked name="sex" value="女"/>女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px" >
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll" >全选
                    <input type="checkbox" class="selectOther" >反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td> 
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.全选   勾上全部选中；取消，取消勾选
        document.querySelector(".selectAll").onclick= function(){
         
            
            var _this= this;        //把this(document.querySelector(".selectAll"))用变量保存,未保存会导致下面使用时this指向window；
            document.querySelectorAll(".user").forEach(function(item){
                // 每个item就是一个对象
                item.checked = _this.checked;
            })
        }  ; 
        //2当所有的都勾选了，全选自动勾上；取消一个，自动勾选取消
        document.querySelectorAll(".user").forEach(function(item){
            //如果当前勾选数量等于总数量，全选框就勾上；否则不勾
            item.onclick = function(){
                document.querySelector(".selectAll").checked = document.querySelectorAll(".user").length == document.querySelectorAll(".user:checked").length;                  //这里的双等于用于判断两边的值是否相等，结果是true或false
            }
        });
        document.querySelector(".selectOther").onclick = function(){
            document.querySelectorAll(".user").forEach(function(item){
                item.checked = !item.checked
            })
        }
         
        if(selectAll.checked){
            document.querySelector(".selectOther").checked = false;
        }
        
    </script>
</body>
</html>